<template>
  <div >
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />

    <div v-if="pageshow">
    <van-cell-group>
      <van-cell title="订单号" :value="val_.num" />
      <van-cell title="所属代理" :value="val_.username" />
      <van-cell title="下单时间" :value="val_.addtime" />
      <van-cell title="最后编辑时间" :value="val_.edittime" />
      <van-cell title="状态" :value="val_.state==null?'未处理':val_.state==1?'已发货':'未发货'" />
      <van-cell title="果品" :value="val_.guopin" />
      <van-cell title="数量" :value="val_.sum" />
      <van-cell title="规格" :value="val_.guige" />
      <van-cell title="快递地址" :value="val_.site" />
      <van-cell title="快递单号" :value="val_.express" />
    </van-cell-group>


    <div class="btnm" v-if="val_.express" style="padding: 40rpx">
      <van-button  type="primary" @click="inExpress"  block plain>修改快递订单号</van-button>
    </div>
    <div class="btnm" v-else style="padding: 40rpx">
      <van-button  type="primary" @click="inExpress"  block>填写快递订单号</van-button>
    </div>
      <div class="btnm">

      <van-button  type="info" @click="goEdit">修改</van-button>
      <van-button  type="warning" @click="deleteOrder">删除</van-button>
      <van-button  type="default" @click="goBack" >返回</van-button>
    </div>
  </div>

    <van-dialog
      id = "fkd"
      use-slot
      async-close
      title="填写快递单号"
      :show="dialogExpressFormShow"
      show-cancel-button
      @close="onClose"
    >
      <van-notify id="van-notify" />

      <div style="padding: 20rpx; padding-top: 40rpx; line-height: 2">
      <van-cell-group>
        <van-field

          :value="val_.express"
          placeholder="请填写快递单号"
          @change="onChangeExpress"
          border = true
          input-align="center"
        />
      </van-cell-group>

      <van-radio-group :value="val_state" @change="onChangesState">
        <van-radio name="0">未发货</van-radio>
        <van-radio name="1">已发货</van-radio>
      </van-radio-group>

        <div class="btnm" style="padding: 10rpx">
          <van-button  type="primary" @click="shaomiao"  block>扫码录入</van-button>
        </div>


      </div>
    </van-dialog>

  </div>
</template>

<script>
  import Notify from '../../../static/vant/notify/notify';
  import Dialog from '../../../static/vant/dialog/dialog';
  import * as dayjs from 'dayjs'
  import 'dayjs/locale/zh-cn' // import locale
  import Toast from  '../../../static/vant/toast/toast';
  import {orderiInfo,orderDel,orderEdit,categoryList} from '../../api/basisMG'

export default {
  data () {
    return {
      pageshow:false,
      dialogExpressFormShow: false,
      newexpress:false,
      val_state:"",
      val_:{
        guopin:"",
        guige:"",
        site:"",
        sum:"",
        num:"",
        state:1,
        express:""
      },
      addExpress:""
    }
  },
  onShow() {
    // if(!this.newexpress){
    //   this.loadOrderData()
    // }
  },
  mounted() {
    this.loadOrderData()
  },
  methods: {
    shaomiao(){
      let t = this
      t.newexpress = true
      wx.scanCode({
        success (res) {
          if(res.scanType=="QR_CODE"){
            Toast.fail('请扫条形码');
          }else{
            Toast.success("扫码成功")
            t.val_.express = res.result
            t.addExpress = res.result
          }
        }
      })
    },

    onChangesState(event){

      this.val_.state = event.mp.detail
      this.val_state = event.mp.detail
    },

    loadOrderData(){
      this.pageshow = false
      orderiInfo({"_id":this.$root.$mp.query.id}).then(res => {
        if(res.data){
          this.val_ = res.data
          this.val_state = this.val_.state+""
          function id2time(id) {
            return dayjs(parseInt(id.toString().substring(0, 8), 16) * 1000).format('YYYY-MM-DD HH:mm:ss');
          }
          this.val_.addtime = id2time(res.data._id)
          this.pageshow = true

          categoryList({"id":this.val_.guopin}).then(res => {
              if(res.data){
                this.val_.guopin = res.data[0].text
                this.val_.guige =res.data[0].children.filter((obj,index)=>{
                  if(obj.id ==this.val_.guige){
                    return obj
                  }
                })[0].text
                this.val_.guige = res.data[0].children[this.val_.guige].text
              }
            }
          )
        }else{
          Toast.fail('数据不存在');
          setTimeout(function() {
            wx.navigateBack({
              delta: 1
            })
          },3000)
        }
      })
    },

    onChangeExpress(data){
      this.addExpress = data.mp.detail
      this.val_.express = data.mp.detail

    },

    onClose(e){
//      let self = this
      if(e.mp.detail === 'confirm') {

        this.newexpress = false
        Toast.loading({
          message: '提交中...'
        });
        //提交快递号
        let t = this


        if(t.addExpress==""){
          t.addExpress = t.val_.express
          if(t.addExpress=="") {
            Notify({ type: 'danger', message: "未填写单号" });

            setTimeout(function() {
              t.$mp.page.selectComponent("#fkd").stopLoading()
            }, 3000)

            return false
          }
        }


        t.values = {
          _id:t.val_._id,
          state:t.val_.state,
          express:t.addExpress
        }


        orderEdit(t.values).then(res => {
          Toast.success('提交成功！');
          t.val_.express = t.val_.express||t.addExpress
          t.dialogExpressFormShow = false
        })


        this.dialogExpressFormShow = false
      } else if(e.mp.detail === 'cancel') {
        this.loadOrderData()
        this.dialogExpressFormShow=false
      }

    },


    inExpress(){
      this.dialogExpressFormShow = true
    },
    goEdit(){
      let _id = this.$root.$mp.query.id
      wx.navigateTo({
        url: "/pages/manageOrder_edit/main?id="+_id
      })
    },
    goBack(){
      wx.navigateBack({
        delta: 1
      })
    },

    deleteOrder(){
      let t = this
      Dialog.confirm({
        message: '确定是否删除该订单？删除后将无法恢复'
      }).then(() => {
        orderDel({"_id":t.val_._id}).then(res => {
          Toast.success('删除成功！');
          wx.redirectTo({
            url: "/pages/manageOrder/main"
          })
        })
      }).catch(() => {
        // on cancel
      });
    }


  },


}
</script>

<style >
  .van-field__input--center {
    font-size: 40rpx;
    height: 29rpx;
  }

  #fkd .van-cell-group{
    border: 2rpx solid #248800;
  }

  page {
    background-color: #fff;
  }
  .btnm{
    text-align: center;
    padding:10rpx 20rpx;
  }

  .van-radio{
    margin: 40rpx;
  }

  .table_parent {
    display:flex;
    justify-content:center;
    align-items:center;
    background: white;
    font-size:30rpx;
    text-align:center;
    box-sizing:border-box;
    color:#595a5e;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
  }
  .table {
    border: 1px solid #dadada;
    border-right: 0;
    border-bottom: 0;
    width: 98%;
  }

  .tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .th, .td {
    padding: 10px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: center;
    width: 100%;
  }

  .th {
    font-weight: 400;
    background-color: #dadada;
  }
  ._van-button{margin: 1%;padding: 0}
  ._van-button button {padding: 0}
  .van-button--normal {padding: 0rpx !important; width: 30%}

</style>
